<!--
  页面容器组件
  提供统一的页面布局结构，包含标题、副标题和内容区域
-->
<template>
  <section class="page-container">
    <header v-if="hasHeader" class="page-header">
      <div>
        <h1 v-if="title" class="page-title">{{ title }}</h1>
        <p v-if="subtitle" class="page-subtitle">{{ subtitle }}</p>
      </div>
      <div class="header-extra">
        <slot name="header-extra" />
      </div>
    </header>
    <div class="page-content">
      <slot />
    </div>
  </section>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  title: {
    type: String,
    default: '',
  },
  subtitle: {
    type: String,
    default: '',
  },
})

const hasHeader = computed(() => props.title || props.subtitle)
</script>

<style scoped>
.page-container {
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.page-title {
  font-size: 28px;
  font-weight: 600;
  margin: 0;
}

.page-subtitle {
  margin: 8px 0 0;
  color: #666;
  max-width: 720px;
  line-height: 1.6;
}

.header-extra {
  margin-left: auto;
}

.page-content {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

@media (max-width: 768px) {
  .page-container {
    padding: 20px;
  }

  .page-title {
    font-size: 22px;
  }
}
</style>

